<template>
  <div class="page-card address-book">
    <h-query :showKey="['title']" @search="search">
      <a-button slot="btn" type="primary" class="a-button-yellow a-button-right" style="margin: 6px 0 0 12px" @click="showMsg">发送短信</a-button>
      <!-- <h-tooltip slot="btn" title="接口暂无" /> -->
    </h-query>
    <!-- <h-table
      ref="htable"
      @init="getList"
      :config="config"
      :showHeadBgNone="false"
      :zebraStripes="false"
      showRowSelection
      @changeStatus="changeStatus"
      @select="select">
      <span slot="avatar" slot-scope="{text}">
        <a-avatar :src="text" :size="36"></a-avatar>
      </span>
    </h-table> -->
    <a-tabs size="large" v-model="tabKey" @change="changeTab">
      <a-tab-pane v-for="(item, i) in tab" :key="i" :tab="item">
        <h-table
          :ref="`htable${i}`"
          @init="getList($event, i)"
          :config="config[i]"
          :showHeadBgNone="false"
          :zebraStripes="false"
          showRowSelection
          @select="select"
          @changeStatus="changeStatus">
          <span slot="img" slot-scope="{text}">
            <a-avatar :src="text" :size="36"></a-avatar>
          </span>
          <span slot="phone" slot-scope="{text, record}">
            {{ record.visiblePhone || text }} <a-icon v-if="!record.visiblePhone" type="eye" @click="getTrueMail(record)" /> <a-icon type="eye-invisible" v-if="record.visiblePhone" @click="record.visiblePhone = ''" />
          </span>
        </h-table>
      </a-tab-pane>
    </a-tabs>

    <h-modal v-model="show" title="发送短信" okText="发送短信" @submit="submit">
      <a-form-model :model="form">
        <a-row :gutter="100">
          <a-col :span="24">
            <div>
              已选择人员：
              <a-tag closable @close="deleteUser(item)" v-for="(item, i) in selectedRow" :key="i">{{ item.name }}</a-tag>
            </div>
            <a-form-model-item label="短信内容">
              <a-textarea :rows="6" v-model="form.message" placeholder="请输入短信内容" />
            </a-form-model-item>
          </a-col>
        </a-row>

      </a-form-model>
    </h-modal>

  </div>
</template>
<script>
import { addressList, sendSMS, getTrueMail } from '@/api/serve';
export default {
  data() {
    return {
      tabKey: 0,
      tab: ['网站联系人', '重点账号', '部门联系人'],
      config: [],
      form: {

      },
      selectRowKeyAll: [],
      selectRowAll: [],
      selectedRowKeys: [],
      selectedRow: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      show: false
    };
  },
  created() {
    for (let i = 0; i <= 2; i++) {
      this.config.push({
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            align: 'center',
            title: '头像',
            dataIndex: 'img',
            scopedSlots: { customRender: 'img' }
          },
          {
            align: 'center',
            title: '姓名',
            dataIndex: 'name'
          },
          {
            align: 'center',
            title: '所属单位',
            dataIndex: 'company'
          },
          {
            align: 'center',
            title: '所属部门',
            dataIndex: 'depart'
          },
          {
            align: 'center',
            title: '职位',
            dataIndex: 'position'
          },
          {
            align: 'center',
            title: '手机号',
            dataIndex: 'phone',
            scopedSlots: { customRender: 'phone' }

          },
          {
            align: 'center',
            title: '邮箱',
            dataIndex: 'email'
          }
        ],
        pagination: {
          total: 100
        }
      });
    }
  },
  methods: {
    getList(params, i) {
      if (params) {
        Object.assign(this.queryParams, params);
      }
      addressList({ ...this.queryParams, type: i }).then(res => {
        this.config[i].dataSource = res.data.records.map(e => {
          return {
            ...e,
            visiblePhone: ''
          };
        });
        this.config[i].pagination.total = res.data.total;
      });
    },
    changeStatus({ id, status }) {
      this.$message.success(status ? '发布成功' : '下线成功');
    },
    remove(record) {
      this.$message.success('删除成功');
      this.$refs.htable.refresh(true);
    },
    search(params) {
      Object.assign(this.queryParams, { ...params, name: params.title });
      this.$refs[`htable${this.tabKey}`][0].refresh();
    },
    changeTab() {
      setTimeout(() => {
        Object.assign(this.queryParams, { type: this.tabKey });
        this.$refs[`htable${this.tabKey}`][0].refresh();
      }, 300);
    },
    showMsg() {
      if (!this.selectedRowKeys.length) {
        this.$message.error('请先选择人员');
        return;
      }
      this.show = true;
    },
    getTrueMail(record) {
      getTrueMail({ id: record.id }).then(res => {
        record.visiblePhone = res.data;
      });
    },
    formateSelect() {
      this.selectedRowKeys = this.selectRowKeyAll.reduce((acc, cur) => {
        return acc.concat(cur);
      }, []);
      this.selectedRow = this.selectRowAll.reduce((acc, cur) => {
        return acc.concat(cur);
      }, []);
    },
    select({ selectedRow, selectedRowKeys }) {
      this.selectRowAll[this.tabKey] = selectedRow;
      this.selectRowKeyAll[this.tabKey] = selectedRowKeys;
      this.formateSelect();

      console.log(this.selectedRow);
    },
    deleteUser({ id }) {
      this.tab.forEach((e, i) => {
        console.log(this.selectRowKeyAll[i]);
        if (this.selectRowKeyAll[i]) {
          const index = this.selectRowKeyAll[i].findIndex(e => e == id);
          console.log(index);
          if (index > -1) this.selectRowKeyAll[i].splice(index, 1);
        }
      });
      const index = this.selectedRowKeys.findIndex(e => e == id);
      // const indexRow = this.selectedRowKeys.findIndex(e => e.id == id);
      if (index > -1) this.selectedRowKeys.splice(index, 1);
    },
    submit() {
      if (!this.selectedRowKeys.length) {
        this.$message.error('请先选择人员');
        return;
      }

      if (!this.form.message) {
        this.$message.error('请输入短信内容');
        return;
      }

      sendSMS({
        unId: this.selectedRowKeys,
        noteContent: this.form.message
      }).then(res => {
        this.show = false;
        this.$refs[`htable${this.tabKey}`][0].cancel();
        this.$message.success('发送成功');
        this.form = {};
        this.$refs[`htable${this.tabKey}`][0].refresh();
      });
    }
  }
};
</script>
<style lang="less" scoped>
.address-book {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  // }
}
</style>
